<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>面试题库</span>
      </div>
      <el-form :inline="true" :model="pageForm">
        <el-form-item label="面试官">
          <el-input v-model="pageForm.interviewerId"></el-input>
        </el-form-item>
        <el-form-item label="面试题">
          <el-input v-model="pageForm.question"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="success" @click="addInterviewQuestion">新增面试题</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="question" label="面试题"></el-table-column>
        <el-table-column prop="referenceAnswer" label="参考答案"></el-table-column>
        <el-table-column prop="interviewerId" label="面试官"></el-table-column>
        <el-table-column label="数字人视频">
          <template slot-scope="scope">
            <!-- 这里可以添加视频播放逻辑，例如使用视频播放器组件 -->
            <video :src="scope.row.aiSrc" controls style="height: 200px;width: 200px"></video>
          </template>
        </el-table-column>
        <el-table-column label="启用">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isOn === 1" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>

      </el-table>
      <div v-if="tableData.length === 0" style="text-align: center;">暂无数据</div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
      <!-- 新增面试题的对话框 -->
      <el-dialog
          title="新增面试题"
          :visible.sync="dialogVisible"
          width="50%"
      >
        <el-form :model="addForm" :rules="addRules" ref="addForm">
          <el-form-item label="关联面试官" prop="interviewerId">
            <el-select v-model="addForm.interviewerId">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="面试题" prop="question">
            <el-input v-model="addForm.question"></el-input>
          </el-form-item>
          <el-form-item label="参考答案" prop="referenceAnswer">
            <el-input v-model="addForm.referenceAnswer"></el-input>
          </el-form-item>
          <el-form-item label="数字人播放视频" prop="aiSrc">

            <el-upload
                class="upload-demo"
                drag
                action="http://172.20.0.144:8680/upload/uploadToOss"
                :on-success="handleAvatarSuccess"

                multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

            </el-upload>

            {{ this.addForm.aiSrc }}

            <video v-if="this.addForm.aiSrc" :src="this.addForm.aiSrc" controls
                   style="height: 200px;width: 200px"></video>


          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveInterviewQuestion">保存</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import http from '@/http.js'; // 导入封装好的axios实例

export default {
  data() {
    return {
      form: {
        interviewer: '',
        interviewQuestion: ''
      },

      pageForm: {
        pageNum: 1,
        pageSize: 10,

      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      addForm: {
        interviewerId: '',
        question: '',
        referenceAnswer: '',
        aiSrc: ''
      },
      addRules: {
        interviewerId: [
          {required: true, message: '请选择面试官', trigger: 'change'}
        ],
        question: [
          {required: true, message: '请填入面试题标题', trigger: 'blur'}
        ],
        referenceAnswer: [
          {required: true, message: '请输入内容', trigger: 'blur'}
        ],
        aiSrc: [
          {required: true, message: '请上传视频', trigger: 'change'}
        ]
      },
      videoUrl: null
    };
  },

  mounted() {
    // 初始化数据，例如发送AJAX请求获取面试题列表数据
    this.fetchData();
  },
  methods: {

    handleAvatarSuccess(res, file) {
      console.log(res);

      console.log(file);
      this.addForm.aiSrc = res.data;

    },
    fetchData() {
      http.post('/questionLib/listInterviewer', this.pageForm).then(res => {
        this.tableData = res.records;
        this.total = res.total

      })

    },
    search() {
      // 这里可以添加搜索逻辑，例如发送请求获取数据
      console.log('执行搜索操作，面试官：', this.form.interviewer, '面试题：', this.form.interviewQuestion);
      this.fetchData();
    },
    addInterviewQuestion() {
      this.dialogVisible = true;
      this.addForm = {}
    },
    handleSizeChange(size) {
      this.pageForm.pageSize = size;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.pageForm.pageNum = page;
      this.fetchData();
    },
    handleVideoChange(file, fileList) {
      const isMP4 = file.type === 'video/mp4';
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isMP4) {
        this.$message.error('只能上传MP4文件!');
      }
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过10MB!');
      }
      if (isMP4 && isLt10M) {
        const reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = (e) => {
          this.videoUrl = e.target.result;
        };
      }
    },
    beforeVideoUpload(file) {
      const isMP4 = file.type === 'video/mp4';
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isMP4) {
        this.$message.error('只能上传MP4文件!');
      }
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过10MB!');
      }
      return isMP4 && isLt10M;
    },
    saveInterviewQuestion() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          // 这里可以添加保存面试题的逻辑，例如发送AJAX请求
          console.log('保存面试题成功', this.addForm);
          http.post('/questionLib/addQuestionLib', this.addForm).then(res => {
            this.fetchData();
            this.dialogVisible = false;
          })
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.video-uploader.icon {
  font-size: 48px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.video-thumbnail {
  width: 178px;
  height: 178px;
  display: block;
}
</style>